<template>
  <div class="page">
    <room-header></room-header>
    <div class="page-main !overflow-hidden relative page">
      <div class="border-bottom">
        <!-- 开奖时间 -->
        <room-time />
        <room-result />
      </div>
      <div class="page-main">
        <room-main ref="roomMainRef" />
      </div>
      <room-footer @send="send" />
      <div class="mark" @click="roomState.resultOpen = false" v-if="roomState.resultOpen"></div>
    </div>
    <!-- 游戏列表 -->
    <room-rightbar />
    <!-- 导航 -->
    <room-switchbar />
    <!-- 规则 -->
    <room-rule />
  </div>
</template>
<route>
  {
    name: "admin-main-room-id",
    meta: {
      pageIndex: 2,
    }
  }
</route>
<script setup lang="ts">
import roomHeader from "../components/room/room-header.vue";
import roomTime from "../components/room/room-time.vue";
import roomResult from "../components/room/room-result.vue";
import roomMain from "../components/room/room-main.vue";
import roomFooter from "../components/room/room-footer.vue";
import roomRightbar from "../components/room/room-rightbar.vue";
import roomSwitchbar from "../components/room/room-switchbar.vue";
import roomRule from "../components/room/room-rule.vue";

import { useGameStore } from "@/store/modules/game";
const gameStore = useGameStore();

const roomMainRef = ref();
const route = useRoute();
const gameDetail = computed(() => {
  return gameStore.gameTotal.find(item => item.LotteryId === Number(route.params.id));
});
const roomState = reactive<RoomState>({
  gameId: Number(route.params.id),
  gameCategory: gameDetail.value?.CategoryId || 3,
  unreadMessage: 0,
  chatContent: "",
  autoScrollToBottom: true,
  switchGameOpen: false,
  ruleOpen: false,
  moreOpen: false,
  chatLoading: true,
  messages: [],
  resultOpen: false,
  locked: false,
  opened: false
});
provide("roomState", roomState);
provide("gameDetail", gameDetail);

const send = async () => {
  await roomMainRef.value?.send();
};

watch(
  () => gameDetail.value,
  () => {
    roomState.gameId = Number(route.params.id);
    roomState.gameCategory = gameDetail.value?.CategoryId || 3;
  }
);
</script>
<style scoped lang="scss">
.mark {
  position: absolute;
  top: 88px;
  left: 0%;
  width: 100%;
  overflow: hidden;
  height: calc(100vh - 70px);
  z-index: 50;
  background-color: rgba(0, 0, 0, 0.5);
}
</style>
